<template>
	<view class="container">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="top-tabar">
			<view class="arrow" @click="returing"></view>
			<view class="title-tbar">
				导航
			</view>
			<!-- 添加一个空的占位元素保持平衡 -->
			<view class="placeholder"></view>
		</view>
		<!-- 地图 -->
		<view class="map-temp">
			<map class="map-sty" :latitude="mapData.latitude" :longitude="mapData.longitude" :markers="mapData.covers">
			</map>
		</view>
		
		
		<view class="bottom-card">
			<view class="cont">
				<view class="tit-con-1">
					车百事汽车生活馆
				</view>
				<view class="position1">
					山阳区人民路与解放路交叉口
				</view>
			</view>
			<view class="bttn">
				<button>导航</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref,
		reactive 
	} from 'vue'
	const returing = () => {
		uni.navigateBack()
	}
	
	const score = ref(4)
	const distance = ref(556)
	const mapData = ref({
		id: 0, // 使用 marker点击事件 需要填写id
		title: 'map',
		latitude: 39.909,
		longitude: 116.39742,
		covers: [{
			latitude: 39.909,
			longitude: 116.39742,
			iconPath: '../../../static/location.png'
		}, {
			latitude: 39.90,
			longitude: 116.39,
			iconPath: '../../../static/location.png'
		}]
	})
	
	const getPosition = () => {
		uni.getLocation({
			type: 'wgs84',
			success: function(res) {
				console.log(res);
				mapData.value.latitude = res.latitude;
				mapData.value.longitude = res.longitude;
			}
		})
	}
	
	
	const rateValue  = ref(3)
	const onChange=(e)=> {
		console.log('rate发生改变:' + JSON.stringify(e))
		// console.log(this.rateValue);
	}
</script>

<style scoped lang="scss">
	.container {
			width: 100vw;
			height: 100vh;
			margin: 0;
			padding: 0;
			display: flex;
			flex-direction: column;
			position: relative;
		}
		
		.status_bar {
			height: var(--status-bar-height);
			width: 100%;
		}
		
		.title-tbar {
			color: white;
			font-size: 36rpx;
			text-align: center;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
		}
		
		.top-tabar {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			background-color: #3486fd;
			height: 320rpx;
			padding: 20rpx;
			position: relative;
		}
		
		.arrow {
			border-top: 2rpx solid white;
			border-right: 2rpx solid white;
			height: 17rpx;
			width: 17rpx;
			margin-top: 15rpx;
			transform: rotate(225deg);
			flex-shrink: 0;
			z-index: 10;
			
			/* 添加点击效果 */
			&:active {
				opacity: 0.7;
				transform: rotate(225deg) scale(0.95);
			}
		}
		
		.placeholder {
			width: 20rpx;
			height: 20rpx;
			visibility: hidden;
		}
		 
		.map-temp {
			background-color: white;
			min-width: 690rpx;
			margin: 0 10rpx;
			top: 0;
			left: 0;
			right: 0;
			margin-top: -240rpx;
			position: relative;
			box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
			border-radius: 20rpx;
			padding: 20rpx 20rpx 0rpx 20rpx;
			min-height: 75%; /* 减少高度占比 */
			// flex-shrink: 0; /* 防止地图区域被压缩 */
			
			
			transform-origin: center; /* 从中心缩放 */
			  transition: transform 0.3s ease; /* 平滑过渡 */
		}
		 
		.map-sty {
			width: 100%;
			height: 100%;
		}
		
		.bottom-card{
		    position: fixed;
		    min-height: 200rpx;
		    bottom: 0;
		    left: 0; 
		    right: 0;
		    background-color: white;
		    padding: 30rpx;
		    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
		    z-index: 1000;
		    display: flex;
		    justify-content: space-between;
		    align-items: center; /* 添加垂直居中 */
		}
		
		.tit-con-1{
		    margin: 0 0 10rpx 0; /* 调整间距 */
		    font-size: 36rpx; /* 使用相对单位 */
		    // font-weight: bold;
		    flex: 1; /* 允许文本区域伸缩 */
		    margin-right: 20rpx; /* 与按钮间距 */
		}
		
		.position1{
		    font-size: 28rpx;
		    color: #666;
		    flex: 1;
		    margin-right: 20rpx;
		}
		
		.bttn{
		    min-width: 160rpx; /* 减小最小宽度 */
		    max-width: 240rpx; /* 添加最大宽度限制 */
		    height: 80rpx;
		    flex-shrink: 0; /* 防止按钮被压缩 */
		}
		
		.bttn button{
		    height: 100%;
		    width: 100%;
		    box-sizing: border-box;
		    background-color: #3486fd;
		    border-radius: 50rpx;
		    text-align: center;
		    color: white;
		    border: none;
		    font-size: 32rpx; /* 添加字体大小 */
		    white-space: nowrap; /* 防止文字换行 */
		    overflow: hidden;
		    text-overflow: ellipsis; /* 文字过长显示省略号 */
		    padding: 0 30rpx; /* 添加内边距 */
		    
		    /* 确保在不同屏幕尺寸下都能正常显示 */
		    display: flex;
		    align-items: center;
		    justify-content: center;
		}
		
		
		/* 在小屏幕设备上进一步调整 */
		@media (max-width: 375px) {
		    .bttn {
		        min-width: 120rpx;
		        max-width: 180rpx;
		        height: 60rpx;
		        
		        button {
		            font-size: 26rpx;
		            padding: 0 15rpx;
		        }
		    }
		    
		    .tit-con-1 {
		        font-size: 32rpx;
		    }
		    
		    .position1 {
		        font-size: 24rpx;
		    }
		}
		
		/* 在大屏幕设备上调整 */
		@media (min-width: 414px) {
		    .bttn {
		        min-width: 180rpx;
		        max-width: 260rpx;
		        height: 90rpx;
		        
		        button {
		            font-size: 36rpx;
		        }
		    }
		}
</style>
